/**
 * Created by Dalyn on 2017/3/21.
 * 企业-结算
 */
import React from "react";
import {hashHistory,Link} from 'react-router';
import Relay from "react-relay";
import GetEnBalanceListMutation from "./mutation/GetEnBalanceListMutation"
import Confirm from "../../common/Confirm"
import {Table, Icon,Input,Button, Modal, Tooltip, message} from 'antd';
import Util from "../../util/Util"
import ReactKey from "../../util/ReactKey"
import Pagination from "./Pagination"
import "./css/settlementRecord.css";
import "./css/account_common.css";

/*导出组件*/
export default class SettlementRecord extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            listInfo: [],
            /*按钮颜色*/
            wholeFlag: true,
            pendFlag: false,
            alyFlag: false,
            /*当前企业ID*/
            partyBEnid: sessionStorage.getItem("enterpriseId"),
            /*总共多少条*/
            totalResult: "",
            /*结算总额*/
            balanceMoney: "",
            /*每页条数*/
            pageItem: "",
            /*指定页码*/
            pageNum: 1,
            /*指定每页显示条数*/
            pageSize: 10,
            /*0-未还款，1-已还款*/
            status: "",
            /*借款公司名*/
            partyBEnName: "",
            /*后台错误提示*/
            hint: "",
            loading:true,
        };
        this.style = {
            confirm1: {
                width: '100px',
                height: '28px',
                backgroundColor: "#36b3b3",
                fontSize: "14px",
                color: "#fff",
                fontFamily: "Microsoft YaHei",
                borderRadius: "28px",
                marginLeft: "20px",
            },
            confirm2: {
                width: '100px',
                height: '28px',
                backgroundColor: "transparent",
                fontSize: "14px",
                color: "#333333",
                fontFamily: "Microsoft YaHei",
                borderRadius: "28px",
                marginLeft: "20px",
            },
            company: {
                width: "150px",
                height: "30px",
                // borderColor: "#bbbbbb",
                // marginTop: "15px"
            },
            conPage: {
                width: '40px',
                height: '22px',
                lineHeight: "22px",
                fontSize: "12px",
                color: "#999",
                fontFamily: "Microsoft YaHei",
                backgroundColor: "transparent",
                border: "1px solid #ededed",
                borderRadius: "2px",
                marginLeft: "10px",
            }
        };
        this.statusText = {
            1:"可结算",
            2:"待审核",
            3:"待结算",
            4:"已结算",
        };
        // this.enterOrderDetail = this.enterOrderDetail.bind(this)
    }
    componentWillMount() {
        this.myRelay();
    }
    myRelay() {
        Relay.Store.commitUpdate(
            new GetEnBalanceListMutation({
                pageNum: this.state.pageNum,
                pageSize: this.state.pageSize,
                status: this.state.status,
                partyBEnid: this.state.partyBEnid,
            }),
            {
                onFailure: () => {
                    message.error("请求失败")
                },
                onSuccess: (response) => {
                    let data = response.getEnBalanceList.data;
                    if (data.errorCode === "0") {
                        this.setState({
                            listInfo: data.enterpriseBalanceList,
                            totalResult: data.totalResult,
                            pageItem: data.enterpriseBalanceList.length,
                            balanceMoney: data.totalBalanceMoney,
                            sumInterest: data.sumInterest,
                        },()=>{
                            this.setState({ loading: false });
                        });
                        // this.refs.page.value = this.state.pageNum;
                    } else {
                        message.error(data.value)
                        this.setState({
                            hint: data.value,
                        });
                    }
                }

            }
        );
    }

    /*全部*/
    whole() {
        this.refs.pagination.setState({
            text:1,
        })
        this.setState({
            status: "",
            wholeFlag: true,
            pendFlag: false,
            alyFlag: false,
            loading:true,
            pageNum: 1
        }, this.myRelay);
    }

    /*未结算*/
    pending() {
        this.refs.pagination.setState({
            text:1,
        })
        this.setState({
            status: "1,2,3",
            wholeFlag: false,
            pendFlag: true,
            alyFlag: false,
            loading:true,
            pageNum: 1
        }, this.myRelay);
    }

    /*已结算*/
    already() {
        this.refs.pagination.setState({
            text:1,
        })
        this.setState({
            status: "4",
            wholeFlag: false,
            pendFlag: false,
            alyFlag: true,
            loading:true,
            pageNum: 1
        }, this.myRelay);
    }

    /*页码*/
    onSure(size, num) {
        this.setState({
            pageSize: size,
            pageNum: num,
            loading:true,
        }, this.myRelay)
    }

    info() {
        Modal.info({
          title: '提示',
          okText: '关闭',
          content: (
            <div>
              有关联的采购订单未完成交易，暂不可进行结算申请
            </div>
          ),
          onOk() {},
        });
      }

    enterOrderDetail(record) {
        record.oid = record.orderId
        hashHistory.push({pathname:'/OrderIndex/',state:{defaultActiveKey: 1,'record':record}});
    }
    render() {
        const columns = [
            {
                title: '订单编号',
                dataIndex: 'orderId',
                key: 'orderId',
                width: '274',
                render: (text, record) => {
                    return (
                        <a style={{color: '#36b3b3'}} onClick={this.enterOrderDetail.bind(this, record)} title={record.orderId}>{record.orderId}</a>
                    )
                }
            }, {
                title: '采购商',
                dataIndex: 'partyAEnName',
                key: 'partyAEnName',
                width: '297',
                render: (text, record) => {
                    return (
                    <span title={record.partyAEnName}>{record.partyAEnName}</span>
                    )
                }
            }, {
                title: '商品',
                dataIndex: 'product',
                key: 'product',
                width: '118',
                render: (text, record) => {
                    return (
                        <span>{record.product}</span>
                    )
                }
            },
             {
                title: '订单金额',
                dataIndex: 'orderAmount',
                key: 'orderAmount',
                width: '118',
                onCellClick: (record, event) => {
                    // console.log(record);
                },
                render: (text, record) => {
                    return (
                        <span>{Util.doubleFormat(record.orderAmount)}</span>
                    )
                },
            },
            {
                title: '开票金额 ',
                dataIndex: 'invoiceMoney',
                key: 'invoiceMoney',
                width: '146',
                render: (text, record) => {
                    return (
                        <span>{Util.doubleFormat(record.invoiceMoney)}</span>
                    )
                },
            },{
                title: '结算状态',
                dataIndex: 'status',
                key: 'status',
                width: '119',
                onCellClick: (record, event) => {
                    // console.log(record);
                },
                render: (text, record) => {
                   if (record.status == 1) {
                     return '可结算'
                   } else if (record.status == 2) {
                     return '待审核'
                   } else if (record.status == 3) {
                     return '待结算'
                   } else if (record.status == 4) {
                     return '已结算'
                   } else if (record.status == 5) {
                     return '未通过'  //重新申请
                   }
                }
            },{
                title: '操作',
                dataIndex: 'operate',
                key: 'operate',
                width: '119',
                onCellClick: (record, event) => {
                    const {status,orderId,invoiceMoney,canApply} = record;
                    if (status == 1 || status == 5) {
                      canApply == 1 ? (
                        hashHistory.push({pathname:'/settlementprocess/',state:{'status':status,'invoiceMoney':invoiceMoney,'orderId':orderId}})
                      ) : message.info('有关联的采购订单未完成交易，暂不可进行结算申请')
                    } else if (status == 2 ) {
                        hashHistory.push({pathname:'/settlementView/',state:{'status':status,'invoiceMoney':invoiceMoney,'orderId':orderId}})
                    } else {
                        hashHistory.push({pathname:'/settlementView/',state:{'status':status,'invoiceMoney':invoiceMoney,'orderId':orderId,'settle': 1}})
                    }
                },
                render: (text, record) => {
                  if( record.status == 1) {
                    return (<span className="settle_rec_operate">申请结算</span>)
                  } else if (record.status == 5) {
                    return (<span className="settle_rec_operate">重新申请</span>)
                  } else {
                    return (<span className="settle_rec_operate">查看</span>)
                  }
                }
            }
        ];
        const listInfo = (null == this.state.listInfo || this.state.listInfo.length == 0) ? [] : this.state.listInfo;
        return (
            <div className="settle_rec_box">
                <div className="settle_rec_box_tab"></div>
                <Confirm style={this.state.wholeFlag ? this.style.confirm1 : this.style.confirm2} tcontext={'全部'}
                         touch={this.whole.bind(this)} key={"_" + Math.random()}/>
                <Confirm style={this.state.pendFlag ? this.style.confirm1 : this.style.confirm2} tcontext={'未结算'}
                         touch={this.pending.bind(this)} key={"_" + Math.random()}/>
                <Confirm style={this.state.alyFlag ? this.style.confirm1 : this.style.confirm2} tcontext={'已结算'}
                         touch={this.already.bind(this)} key={"_" + Math.random()}/>
                <div className="settle_rec_t">
                    <span className="settle_rec_tsp">结算金额：</span>
                    <span className="settle_rec_tsp account_red">{Util.doubleFormat(this.state.balanceMoney)}</span>
                    <span className="settle_rec_tsp">元</span>
                </div>
                <div className="settle_rec_rel">
                  <Table
                      columns={columns}
                      dataSource={listInfo}
                      pagination={false}
                      rowKey={record => record.orderId}
                      style={{width: '100%'}}
                      className="order_table"
                      loading={this.state.loading}
                      // bordered
                  />
                <Tooltip overlayClassName='settle_rec_tooltip' placement="top" title='开票金额=销售订单金额—关联的采购订单金额'>
                     <Icon className="settle_rec_icon" type="question-circle-o" />
                  </Tooltip>
                </div>

                <Pagination eachSize={this.state.pageSize} dataSize={this.state.totalResult}
                            onSure={this.onSure.bind(this)} ref={'pagination'}/>
            </div>
        )
    }
}
